<template>
  <div class="read-history">
       <van-nav-bar
        class="app-nav-bar"
        title="我的收藏"
        @click-left="$router.back()"
        >
        <div slot="left">
          <van-icon color="#fff" size="25" name="arrow-left" />
        </div>
        </van-nav-bar>
        <div class="readhistory-content">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >
                <van-cell :to="{ name: 'Article', params: { articleId: collection.art_id } }" center  v-for="(collection,index) in collectionList" :key="index">
                <div class="history-title">{{ collection.title }}</div>
                <div class="history-info">
                    <span>{{ collection.aut_name }}</span>
                    <span>{{ collection.comm_count }} 评论</span>
                    <span>{{ collection.pubdate | relativeTime }}</span>
                </div>
                 </van-cell>
            </van-list>
        </div>
  </div>
</template>

<script>
import { getUserCollection } from '@/api/user'
export default {
  name: "Readhistory",
  data() {
    return {
        page: 1,
        per_page: 10,
        collectionList: [],
        loading: false,
        finished: false
    };
  },

  mounted() {
    //   this.loadUserReadHistory()
  },

  methods: {
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
       const { data:{data} }   = await getUserCollection({
              page: this.page,
              per_page: this.per_page
          })
        //   console.log(data)
        this.collectionList.push(...data.results)

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (data.results.length === 0) {
          this.finished = true;
          return 
        }
          this.page++ 
    },
  }
};
</script>

<style lang="less" scoped>
.read-history{
  height: 100%;
  .readhistory-content{
      position: fixed;
      top: 46px;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      .history-title{
        font-weight: 400;
        line-height: .58667rem;
        font-size: .42667rem;
        margin-bottom: .26667rem;
    }
    .history-info{
        color: #999;
        line-height: .58667rem;
        position: relative;
        font-size: .32rem;
        span:nth-child(n+2){
            margin-left: 10px;
        }
    }
  }
    
}
</style>